<article>
    <h1><?php echo $GLOBALS['title'] ?></h1>
    <p>CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。</p>
	<h2><a>定位属性—相对定位</a></h2>
	<p>相对定位是参照元素原来的位置进行移动，元素原有的空间位不变，元素在移动时会盖住其他元素</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	p {position: relative;}
</style>') ?></code></pre>
	<h2><a>定位属性—绝对定位</a></h2>
	<p>绝对定位是元素完全脱离文档流，页面中的其他元素视他不存在，也就是说绝对定位元素不会影响到其他元素</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	p {position: absolute;}
</style>') ?></code></pre>
	<h2><a>定位属性—固定定位</a></h2>
	<p>固定定位是元素完全脱离文档流，参照于可视区域，固定在可视区域中</p>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	p {position: fixed;}
</style>') ?></code></pre>
	<h2><a>关于定位的说明</a></h2>
	<ul>
		<li>相对定位是参照元素在空间中的原有位置</li>
		<p></p>
		<li>绝对定位是参照距离他最近的有定位属性的父级元素，如果父级元素没有定位属性，则会参照文档</li>
		<p></p>
		<li> 一般我们设置绝对定位时，都会找一个合适的父级将其设置为相对定位，不过最好为这个具有相对定位属性的  父级设置宽高这样在各个浏览器中表现不会出现问题</li>
	</ul>
	<h2><a>层级Z-index</a></h2>
	<ul>
		<li>定义属性是脱离文档流的，也就是说他有可能盖住其他元素</li>
		<p></p>
		<li>如果有多个定义属性存在，那么相互间就会存在遮挡的情况</li>
		<p></p>
		<li>可以通过修改元素的Z-index属性来设置元素叠放的层  次，Z-index值越高就会越在最上面</li>
	</ul>
	<h3>实例：</h3>
	<pre><code><?php echo htmlspecialchars('
<style type="text/css">
	p{z-index: 999;}
</style>') ?></code></pre>
</article>
